<template>
  <div>
    <div class="nav">
      <div class="title">
        <span class="classify"><van-icon name="wap-nav" /></span>
        <van-search
          v-model="value_search"
          shape="round"
          background="#FF0000"
          placeholder="请输入搜索关键词"
        />
        <span class="login">
          <img src="http://img1.360buyimg.com/da/jfs/t1/14716/32/11447/94000/5c90a83bEaa611013/18490bf08654ba09.gif?v=0.5169339736155218" alt="">
        </span>
      </div>
      <div class="page">
        <span class="banner">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item
              v-for="item in $store.state.home.bannerData"
              :key="item.id"
              ><img :src="item.img" alt=""
            /></van-swipe-item>
          </van-swipe>
        </span>
        <div class="main">
          <van-swipe
            class="my-swipe main_swiper"
            :autoplay="3000000"
            indicator-color="red"
          >
            <van-swipe-item>
              <van-grid :gutter="5" :column-num="5">
                <van-grid-item
                  v-for="item in $store.state.home.contentData_before"
                  :key="item.id"
                  :icon="item.img"
                  :text="item.name"
                />
              </van-grid>
            </van-swipe-item>
            <van-swipe-item>
              <van-grid :gutter="5" :column-num="5">
                <van-grid-item
                  v-for="item in $store.state.home.contentData_next"
                  :key="item.id"
                  :icon="item.img"
                  :text="item.name"
                />
              </van-grid>
            </van-swipe-item>
          </van-swipe>
          <!-- 秒杀 -->
          <div class="main_center">
            <div class="seckill">
              <div class="countdown">
                <span>京东秒杀</span>
                <van-count-down :time="time" format="HH:mm:ss">
                  <template #default="timeData">
                    <span class="block">{{
                      timeData.hours.length > 1
                        ? timeData.hours
                        : "0" + timeData.hours
                    }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.seconds }}</span>
                  </template>
                </van-count-down>
                <span class="more"
                  >更多秒杀<van-icon name="arrow" size="20px"
                /></span>
              </div>
              <!-- 秒杀内容 -->
              <div class="main_center">
                <app-scroll
                  :scrollX="true"
                  :scrollY="false"
                  scrollWidth="1150px"
                >
                  <span
                    v-for="item in $store.state.home.seckillData"
                    :key="item.id"
                    class="main_center_wrap"
                  >
                    <img :src="item.img" alt="" />
                    <p>${{ item.newpic }}</p>
                    <s>${{ item.pic }}</s>
                  </span>
                  <span class="main_center_wrap look_all">
                    查&nbsp;&nbsp; 看&nbsp;&nbsp; 全 &nbsp;&nbsp;部&nbsp;&nbsp;
                  </span>
                </app-scroll>
              </div>
            </div>
          </div>
        </div>
        <!-- 商品列表 -->
      
     
      <Homelist />
</div>
        
    </div>
  </div>
</template>
  
<script>

import Homelist from './home_list.vue';
export default {
  created() {
    //派发vuex任务请求数据
    //请求轮播图数据
    this.$store.dispatch("home/banner_data");
    //详情分类图标数据
    this.$store.dispatch("home/content_data");
    //京东秒杀数据
    this.$store.dispatch("home/seckill_data");
    //京东商品数据
    this.$store.dispatch("home/list_data", 20);
    // console.log(this.val);
  },
 

  data() {
    return {
      value_search: "",
      time: 30 * 60 * 60 * 1000,
      val: 0,
      list_data: {},


    };
  },
  components:{
    // scroll
   Homelist


  },
};
</script>

<style lang='scss' scoped>
@import "@/style/page.scss";
.nav {
  width: 100%;
  height: 189px;
  background: red;
  top: 0px;

  .my-swipe {
    color: rgb(223, 26, 26);
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    margin: 10px 0;
    padding-top: 50px;


    img {
      display: block;
      width: 90%;
      height: 100%;
      margin: 0 auto;
      border-radius: 10px 10px;
    }
  }
  .van-grid{
    margin-top: -17px;
  }
  .indicator {
    top: 20px;
  }
  .title {
    width: 100%;
    height: 44px;
    display: flex;
    position: fixed;
    z-index: 99;
    background: red;
    align-content: center;
    justify-content: space-between;
    line-height: 44px;
    padding: 2px;
    top: 0px;
    box-sizing: border-box;
    .classify {
      font-size: 24px;
    }
  }
  .main_swiper {
    height: 200px;
    margin: 10px 0;
  }

  .login{
    width: 50px;
    img{
      height: 100%;

    }
  }


  //秒杀
  .main_center {
    .seckill {
      width: 100%;
      height: 160px;
      background: #ffffff;
      background: #FFFFFF(90, 133, 47);

      //倒计时
      .countdown {
        width: 100%;
        height: 40px;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 40px;
        font-size: 14px;

        .colon {
          display: inline-block;
          margin: 0 4px;
          color: #ee0a24;
        }
        .block {
          display: inline-block;
          margin: auto;

          width: 18px;
          color: #fff;

          font-size: 12px;
          text-align: center;
          background-color: #ff1732;
          border-radius: 5px;
        }
      }
      //更多
      .more {
        width: 50%;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    .main_center_wrap {
      display: inline-block;
      width: 60px;
      height: 100px;
      margin-right: 8px;
      border-radius: 8px;
      font-size: 12px;
      line-height: 10px;
      img {
        display: block;
        width: 100%;
        height: 70%;
      }
    }
    //查看更多
    .look_all {
      height: 100px;
      width: 20px;
      background: cornflowerblue;
      float: right;
      font-size: 14px;
      line-height: 20px;
    }
  }
}
</style>